/* eslint-disable no-template-curly-in-string */
import qs from "qs";
import React, { memo, useState } from "react";
import { message, Form, Input, Button, DatePicker } from "antd";
import { useHistory } from "react-router-dom";
import ParticlesBg from "particles-bg";
import { Formwrap } from "./style";
import request from "../../service/request";
import Uploadyzh from "@/components/uploadyzh";

export default memo(function Registerform() {
  const [imageUrl, setImageUrl] = useState("");
  const history = useHistory();

  const setimg = (imgu) => {
    setImageUrl(imgu);
  };
  const onFinish = (values) => {
    delete values.confirm;
    values.aventer = imageUrl;
    //这里必须要手动设置图片路径,否则会面临c:\fakepath\问题
    values.birthday = values.birthday.format("YYYY-MM-DD");
    request
      .post("travel/register", qs.stringify(values))
      .then((res) => {
        console.log(res);
        if (res) {
          message.success({
            content: "注册成功",
            style: {
              fontSize: 20,
            },
          });
          history.push("/login");
        } else {
          message.error({
            content: "注册失败，用户名已存在",
            style: {
              fontSize: 20,
            },
          });
        }
      })
      .catch((err) => {
        console.log("注册接口出错");
      });
  };

  return (
    <Formwrap>
      <div className="bac"></div>
      <ParticlesBg color="gray" type="polygon" bg={true} />
      <div className="form1">
        <h1>Register</h1>
        <Form
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          style={{ color: "red" }}
        >
          <Form.Item
            label="用户名"
            name="userName"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "Please input your password!",
              },
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            name="confirm"
            label="确认密码"
            dependencies={["password"]}
            hasFeedback
            rules={[
              {
                required: true,
                message: "Please confirm your password!",
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(
                    new Error(
                      "The two passwords that you entered do not match!"
                    )
                  );
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="昵称"
            name="nickname"
            rules={[
              {
                required: true,
                message: "Please input your nickname!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="profile"
            label="个人简介"
            rules={[
              {
                required: true,
                message: "Please input Intro",
              },
            ]}
          >
            <Input.TextArea showCount maxLength={100} />
          </Form.Item>
          <Form.Item
            name="aventer"
            label="头像"
            rules={[
              {
                required: true,
                message: "Please input Intro",
              },
            ]}
          >
            <div className="upload">
              <Uploadyzh setimg={setimg}></Uploadyzh>
            </div>
          </Form.Item>
          <Form.Item
            name="birthday"
            label="生日"
            rules={[
              {
                required: true,
                message: "Please input Intro",
              },
            ]}
          >
            <DatePicker />
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType="submit">
              注册
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div className="tologin" onClick={(e) => history.push("/login")}>
        已经有帐号了？返回登录
      </div>
    </Formwrap>
  );
});
